<template>
  <div class="group-box">
    <div class="group-header">
      <div class="header-title">{{ title }}</div>
      <div
        :class="{
          'header-collapse': true,
          'header-collapse-show': groupDisplay,
        }"
        @click="handleDisplay"
      >
        <svg
          focusable="false"
          data-icon="right"
          width="1.2em"
          height="1.2em"
          fill="currentColor"
          aria-hidden="true"
          viewBox="64 64 896 896"
        >
          <path
            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
          ></path>
        </svg>
      </div>
    </div>
    <div v-show="groupDisplay" class="group-content">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue";

defineProps<{
  title: String;
}>();
const groupDisplay = ref(true); // 是否显示内容
// 操作：展开/收起
const handleDisplay = () => {
  groupDisplay.value = !groupDisplay.value;
};
</script>

<style scoped>
.group-box {
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
}
.group-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-title {
  font-size: 16px;
}
.header-collapse {
  padding: 2px 2px;
  font-size: 12px;
}
.header-collapse svg {
  display: inline-block;
  transition: transform 0.24s;
}
.header-collapse-show svg {
  transform: rotate(90deg);
}
.group-content {
  padding: 4px 16px 16px;
  overflow: hidden;
}
</style>
